<template>
  <Module-box title="报修工单数据" height="612px" bg="short2">
    <div class="chart-top">
      <el-date-picker v-model="date" type="year" placeholder="" format="yyyy年" value-format="yyyy-MM-dd" size="mini"
        :editable="false" :clearable="false" :append-to-body="false" @change="changeDate" />
      <div class="chart-top-right">
        <div v-for="(i, k) in yAxis" :key="k" class="chart-legend" :style="{
            '--border': i.border,
            '--color': i.color,
          }">
          {{ i.name }}
        </div>
      </div>
    </div>
    <div id="chart-order" />
    <div class="chart-bottom-count">
      <div v-for="(i, k) in dataList" :key="k" class="count-item">
        <img :src="i.icon" />
        <div class="count-item-label">{{ i.label }}</div>
        <div class="count-item-value">{{ i.value }}</div>
      </div>
    </div>
  </Module-box>
</template>
<script>
  import { animateNumber } from "@/utils/common";
  import { getWorkWarrantyData } from "@/utils/screen";
  import setting1 from "@/assets/setting-1.png";
  import setting2 from "@/assets/setting-2.png";
  import setting3 from "@/assets/setting-3.png";
  import setting4 from "@/assets/setting-4.png";
  export default {
    data() {
      return {
        date: "",
        queryParams: {
          filter: "",
        },
        yAxis: [
          {
            name: "报修",
            border: "rgba(10,132,255,0.15)",
            color: "#596BCC",
            prop: "warrantys",
            data: [],
          },
          // {
          //   name: "扫码报修",
          //   border: "rgba(212,222,236,0.15)",
          //   color: "#BF9E37",
          //   prop: "faults",
          //   data: [],
          // },
          {
            name: "维保",
            border: "rgba(50,215,75,0.15)",
            color: "#32D74B",
            prop: "protects",
            data: [],
          },
        ],
        dataList: [
          { label: "报修工单数量", value: 0, icon: setting1 },
          { label: "暂停工单数量", value: 0, icon: setting2 },
          { label: "维保工单数量", value: 0, icon: setting3 },
          { label: "返修工单数量", value: 0, icon: setting4 },
        ],
      };
    },
    mounted() {
      this.date = this.parseTime(Date.now(), "{y}-{m}-{d}");
      this.changeDate();
    },
    methods: {
      // 日期选择
      changeDate() {
        this.queryParams.year = new Date(this.date).getFullYear();
        this.getList();
      },
      // 获取图表数据
      getList() {
        getWorkWarrantyData(this.queryParams).then((res) => {
          if (res && res.code == 1) {
            const {
              months,
              warrantyCount = 0,
              pauseCount = 0,
              protectCount = 0,
              returnCount = 0,
            } = res.data;
            this.xAxis = months || [];
            this.yAxis.forEach((i) => {
              i.data = res.data[i.prop] || [];
            });
            this.drawChart();
            // faultCount
            let list = [warrantyCount, pauseCount, protectCount, returnCount];
            this.getDetail(list);
          }
        });
      },
      // 获取统计
      getDetail(list) {
        this.dataList.forEach((i, k) => {
          animateNumber({ end: list[k] }, (value) => {
            i.value = value;
            this.$forceUpdate();
          });
        });
        console.log(this.dataList, 'this.dataList');
        // document.querySelectorAll("img").forEach((box) => {
        //   const randomDelay = Math.random() * 2;
        //   box.style.animationDelay = `${randomDelay}s`;
        // });
      },

      // 绘制图表
      drawChart() {
        let chartDom = document.getElementById("chart-order");
        if (chartDom?.hasAttribute("_echarts_instance_"))
          chartDom.removeAttribute("_echarts_instance_");
        let myChart = this.$echarts.init(chartDom);
        let series = [];
        this.yAxis.forEach((i) => {
          series.push({
            type: "line",
            name: i.name,
            data: i.data,
            symbolSize: 8,
            lineStyle: {
              color: i.color,
              width: 3,
            },
            label: {
              show: true,
              position: "top",
              fontSize: 17,
              formatter: "{c}",
              color: i.color,
            },
          });
        });
        let option = {
          color: this.yAxis.map((i) => i.color),
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                type: "solid",
                color: "#003AFF",
              },
            },
          },
          grid: {
            top: "12%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              data: this.xAxis,
              axisTick: { show: false },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                  fontSize: 15,
                },
              },
              axisLine: {
                lineStyle: { color: "#4E8AB1" },
              },
            },
          ],
          yAxis: {
            name: "单位：个",
            nameTextStyle: {
              color: "#fff",
              fontSize: 15,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 15,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(255,255,255,0.2)"],
                width: 1,
                type: "dashed",
              },
            },
          },
          series,
        };
        myChart.setOption(option, true, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .chart-top {
    height: 26px;
    margin: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .chart-top-right {
      display: flex;
      align-items: center;

      .chart-legend {
        --border: transparent;
        --color: transparent;
        text-align: center;
        font-size: 14px;
        color: #bebebe;
        margin-left: 16px;
        position: relative;

        &::before {
          content: "";
          width: 40px;
          height: 12px;
          display: inline-block;
          margin-right: 4px;
          vertical-align: middle;
          border: 1px solid var(--border);
        }

        &::after {
          content: "";
          width: 30px;
          height: 4px;
          position: absolute;
          left: 5px;
          top: 8px;
          background: var(--color);
        }
      }
    }
  }

  #chart-order {
    width: 100%;
    height: 280px;
  }

  .chart-bottom-count {
    width: 100%;
    height: 174px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 28px 24px;

    .count-item {
      width: 100%;
      height: 78px;
      background: url("~@/assets/chart-count-bg.png") no-repeat;
      background-size: calc(100% - 38px) 100%;
      background-position: 38px;
      position: relative;

      &::before {
        content: "";
        width: 71px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url("~@/assets/icon-bg.png") no-repeat;
        background-size: 100% 100%;
      }

      img {
        position: absolute;
        width: 49px;
        height: 49px;
        left: 10px;
        top: 13px;
        // animation: upAndDown 5s linear infinite;
      }

      &-label {
        width: 100%;
        height: 39px;
        line-height: 39px;
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 20px;
        color: #fff;
        text-align: right;
        padding-right: 10px;
        box-sizing: border-box;
      }

      &-value {
        width: 100%;
        height: 39px;
        line-height: 34px;
        font-family: Alibaba PuHuiTi 20;
        font-size: 26px;
        color: #2cfefe;
        text-align: right;
        padding-right: 10px;
        box-sizing: border-box;

        &::after {
          content: "个";
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }

  // @keyframes upAndDown {
  //   0%,
  //   50%,
  //   100% {
  //     transform: translateY(0);
  //   }
  //   25% {
  //     transform: translateY(-4px);
  //   }
  //   75% {
  //     transform: translateY(4px);
  //   }
  // }
  ::v-deep .el-date-editor {
    width: 68px !important;
    height: 26px;
    background: url("~@/assets/date-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  ::v-deep .el-input__prefix {
    display: none !important;
  }

  ::v-deep .el-input__suffix {
    display: none !important;
  }

  ::v-deep .el-input__inner {
    height: 26px !important;
    line-height: 26px !important;
    text-align: center;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;

    &::placeholder {
      color: #fff;
    }
  }

  ::v-deep .el-picker-panel {
    background-color: rgba(4, 47, 72, 0.4) !important;
    backdrop-filter: blur(3px);

    .available {
      color: #fff;
    }

    .el-date-table th,
    .el-picker-panel__icon-btn {
      color: #fff;
    }

    .el-date-table td.current:not(.disabled) span {
      background-color: rgb(6, 193, 255) !important;
    }

    .current:not(.disabled) .cell {
      color: rgb(6, 193, 255) !important;
    }

    .el-popper .popper__arrow::after {
      border-top-color: rgba(4, 47, 72, 0.4) !important;
    }

    .el-date-picker__header-label,
    .cell {
      color: #fff;
      font-size: 15px;
    }
  }
</style>